<template>
  <el-dialog
    title="题目详情预览"
    width="900px"
    :visible.sync="dialogVisible"
    :before-close="cancelFn"
   
  >
    <el-row class="text">
      <el-col :span="6">
        <span v-if="questionItem.questionType === '1'">【题型】：单选题</span>
        <span v-else-if="questionItem.questionType === '2'"
          >【题型】：多选题</span
        >
        <span v-else>【题型】：简答题</span>
      </el-col>
      <el-col :span="6">
        <span> 【编号】：{{ questionItem.id }}</span>
      </el-col>
      <el-col :span="6">
        <span v-if="questionItem.difficulty === '1'">【题型】：简单</span>
        <span v-else-if="questionItem.difficulty === '2'">【题型】：一般</span>
        <span v-else>【题型】：困难</span>
      </el-col>
      <el-col :span="6">
        <span> 【标签】：{{ questionItem.tags }}</span>
      </el-col>
    </el-row>
    <el-row class="text">
      <el-col :span="6">
        <span>【学科】：{{ questionItem.subject }}</span>
      </el-col>
      <el-col :span="6">
        <span>【目录】：{{ questionItem.directoryName }}</span>
      </el-col>
      <el-col :span="6">
        <span>【方向】：{{ questionItem.direction }}</span>
      </el-col>
      <el-col :span="6"> </el-col>
    </el-row>
    <hr />
    <!-- 题干 -->
    <el-row>【题干】: </el-row>
    <el-row>
      <!-- 题干 -->
      <template v-solt="{ questionItem }">
        <div v-html="questionItem.question"></div>
      </template>
    </el-row>
    <el-row>
      <!-- 单选 -->
      <span v-if="questionItem.questionType === '1'">
        单选题 选项: (以下选中的选项为正确答案)</span
      >
      <!-- 多选框 -->
      <span v-else-if="questionItem.questionType === '2'">
        多选题 选项: (以下选中的选项为正确答案)</span
      >
      <span v-else>简答题</span>
    </el-row>

    <!-- 单选框 -->
    <el-row>
      <el-radio-group v-model="radio" v-if="questionItem.questionType === '1'">
        <el-row v-for="(obj, index) in questionItem.options" :key="index">
          <el-radio
            :label="obj.isRight"
            :disabled="obj.isRight === 0"
            :checked="obj.isRight === 1"
            >{{ obj.title }}</el-radio
          >
        </el-row>
      </el-radio-group>
      <!-- 多选框 -->
      <el-checkbox-group
        v-model="questionItem.options"
        v-if="questionItem.questionType === '2'"
      >
        <el-row v-for="(obj, index) in questionItem.options" :key="index">
          <el-checkbox
            v-model="obj.isRight"
            :disabled="obj.isRight === 0"
            :checked="obj.isRight === 1"
            >{{ obj.title }}</el-checkbox
          >
        </el-row>
      </el-checkbox-group>
    </el-row>
    <hr />
    <!-- 参考答案 -->
    <!-- 视频答案 -->
    【参考答案】：<el-button type="danger" @click="isVideoShow = true"
      >视频答案预览</el-button
    >
    <el-row class="Video" v-if="isVideoShow">
      <video :src="questionItem.videoURL" controls="controls"></video>
    </el-row>
    <hr />
    <!-- 答案解析 -->
    <el-row>
      <el-col>
        <template v-silot="{ questionItem }">
          <div>【答案解析】: <span v-html="questionItem.answer"> </span></div>
        </template>
      </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col>
        <div>
          【题目备注】: <span> {{ questionItem.questionType }}</span>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-col :span=2>
          <el-button type="primary" plain @click="cancelFn">关闭</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisible: { type: Boolean, default: false },
    questionItem: { type: Object, default: () => {} },
  },
  data() {
    return {
      isVideoShow: false,
      radio: 1,
      // dialogVisible: true
    };
  },

  methods: {
    // 关闭
    cancelFn() {
      this.$emit("update:dialogVisible",false);
      this.isVideoShow = false;
    },
   
  },
};
</script>

<style>
.text {
  font-size: 16px;
  color:blue
}
.Video {
  margin-top: 20px;
}
</style>
